<template>
  <el-dialog title="性能展示" :visible.sync="visible" width="80%" :before-close="handleClose">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="CPU" name="first">
        <el-col :span="24">
          <el-card>
            <div id="J_chartLineBox" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="内存" name="second">
        <el-col :span="24">
          <el-card>
            <div id="J_memory" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="磁盘" name="third">
        <el-col :span="24">
          <el-card>
            <div id="J_disk" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="网卡一" name="fix">
        <el-col :span="24">
          <el-card>
            <div id="J_network_Card" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="网卡二" name="six" v-if="Twocar">
        <el-col :span="24">
          <el-card>
            <div id="J_Card_Two" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="网卡三" name="seven" v-if="Threecar">
        <el-col :span="24">
          <el-card>
            <div id="J_Card_Three" class="chart-box" style="height:350px;"></div>
          </el-card>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import echarts from 'echarts'
import { connect } from 'net';
export default {
  data () {
    return {
      visible: true,
      activeName: 'first', // 默认第一个tab
      chartLine: null, // cpu折线图
      dataCpu: [], // cpu数据
      memoryUsage: null, // 内存折线图
      dataMemory: [], // 内存数据
      disk: null, // 磁盘折线图
      diskReadBytes: [],  // 磁盘读取速率
      diskWriteBytes: [], // 磁盘写入速率
      networkCard: null, // 网卡一折线图
      netIncomingBytes: [], // 网卡一入方向流量速率
      netOutgoingBytes: [], // 网卡一出方向流量速率
      netIncomingBytes3: [], // 网卡三入方向流量速率
      netOutgoingBytes3: [], // 网卡三出方向流量速率
        CardThree:null, //网卡三折现图
      CardTwo: null, // 网卡二折线图
      netOtherIncomingBytes: [], // 网卡二入方向流量速率
      netOtherOutgoingBytes: [], // 网卡二出方向流量速率
      Twocar: false,
        Threecar: false,
      options: { // loading数据
        fullscreen: true,
        lock: true,
        // spinner:'el-icon-loading',
        text: '加载中...',
        fontSize:'28px',
        background: 'rgba(0, 0, 0, .1)'
      }
    }
  },
  mounted () {
  },
  activated () {
    if (this.chartLine) {
      this.chartLine.resize()
    }
    if (this.memoryUsage) {
      this.memoryUsage.resize()
    }
    if (this.disk) {
      this.disk.resize()
    }
    if (this.networkCard) {
      this.networkCard.resize()
    }
    if (this.CardTwo) {
      this.CardTwo.resize()
    }
      if (this.CardThree) {
          this.CardThree.resize()
      }
  },
  methods: {
    init (ud) { // 初始化显示
      this.visible = true
      let params = {
        uuid: ud
      }
      let loadingInstance = this.$loading(this.options)
      this.$http({
        url: this.$http.preBaseUrl('/cs/metric/list'),
        method: 'get',
        params:params
      }).then(({data}) => {
        if ( data.code == '0') {
          this.dataCpu =data.cpu  // 获取cpu数据
          this.dataMemory = data.memorys  // 获取内存数据
          this.diskReadBytes = data.diskReadBytes // 获取磁盘数据
          this.diskWriteBytes = data.diskWriteBytes //  获取磁盘数据
          this.netIncomingBytes = data.netIncomingBytes // 获取网卡一
          this.netOutgoingBytes = data.netOutgoingBytes // 获取网卡一
          this.netIncomingBytes3 = data.netIncomingBytes3 // 获取网卡一
          this.netOutgoingBytes3 = data.netOutgoingBytes3 // 获取网卡一
          this.netOtherIncomingBytes = data.netOtherIncomingBytes || [] // 获取网卡二
          this.netOtherOutgoingBytes = data.netOtherOutgoingBytes || [] // 获取网卡二
          loadingInstance.close()
          this.initChartLine()
          this.initMemory()
          this.initDisk()
          this.initNetworkCard()
          if (this.netOtherIncomingBytes.length != 0) {
            this.Twocar = true
            this.$nextTick(() => {
              this.initCardTwo()
            })
          }
            if (this.netIncomingBytes3.length != 0) {
                this.Threecar = true
                this.$nextTick(() => {
                    this.initCardThree()
                })
            }
          loadingInstance.close()
        }
      }).catch(error => {
				loadingInstance.close()
				this.$message({
					showClose: false,
					message: '程序异常,请联系管理员',
					type: 'warning'
				})
			})
    },
    handleClick (val) { // 待定
      if(val.index == 0) {
        this.$nextTick(() => {
         this.chartLine.resize()
        })
      } else if(val.index == 1) {
        this.$nextTick(() => {
          this.memoryUsage.resize()
        })
      } else if(val.index == 2) {
        this.$nextTick(() => {
          this.disk.resize()
        })
      } else if(val.index == 3) {
        this.$nextTick(() => {
          this.networkCard.resize()
        })
      } else if (val.index == 4) {
        this.$nextTick(() => {
          this.CardTwo.resize()
        })
      } else if (val.index == 5){
          this.$nextTick(()=>{
              this.CardThree.resize()
          })
      }
    },
    handleClose (deno) {
      this.visible = false
      this.$emit('addOrUpdateHide', false)
    },
    initChartLine () { // 初始化cpu占用率%
      let option = {
        'title': {
          'text': 'CPU占用率(%)'
        },
        'tooltip': {
          'trigger': 'axis',
          'formatter':function (params) {
            return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + 'CPU占用率：' + params[0].data + '%'
          }
        },
        // 'legend': {
        //   'data': ['CPU占用率']
        // },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'show': false,
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
          'axisLabel': {
            'interval': 4,
            'show': true
          }
        },
        'yAxis': {
          'type': 'value',
          'axisLabel': {
            'formatter': '{value}%'
          },
          'splitLine': {
            'show': true
          }
        },
        'series': [
          {
            'name': 'CPU占用率',
            'type': 'line',
            'stack': '占用率',
            'data': this.dataCpu,
            'itemStyle': {
                'normal': {
                    'color': 'red'
                }
            },
            'showSymbol': false
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
      this.chartLine.clear()
      this.chartLine.setOption(option, true)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },
    initMemory () { // 初始化内存占用率%
      let option = {
        'title': {
          'text': '内存使用量(MB)'
        },
        'tooltip': {
          'trigger': 'axis',
          'formatter':function (params) {
            return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + '内存使用量：' + params[0].data
          }
        },
        // 'legend': {
        //   'data': ['内存占用率']
        // },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'show': false,
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
          'axisLabel': {
            'interval': 4,
            'show': true
          }
        },
        'yAxis': {
          'type': 'value',
          'splitLine': {
            'show': true
          }
        },
        'series': [
          {
            'name': '内存使用量',
            'type': 'line',
            // 'stack': '',
            'data': this.dataMemory,
            'itemStyle': {
                'normal': {
                    'color': 'red'
                }
            },
            'showSymbol': false
          }
        ]
      }
      this.memoryUsage = echarts.init(document.getElementById('J_memory'))
      this.memoryUsage.clear()
      this.memoryUsage.setOption(option, true)
      window.addEventListener('resize', () => {
        this.memoryUsage.resize()
      })
    },
    initDisk () { // 初始化磁盘数据
      let option = {
        'title': {
          'text': '磁盘速率(Bps)'
        },
        'tooltip': {
          'trigger': 'axis',
          'formatter':function (params) {
            return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + '磁盘读取速率：' + params[0].data + '</br>'  + '磁盘写入速率：' + params[1].data
          }
        },
        // 'legend': {
        //   'data': [ '磁盘使用量' ]
        // },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'show': false,
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
          'axisLabel': {
            'interval': 4,
            'show': true
          }
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '磁盘读取速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.diskReadBytes,
            'itemStyle': {
                'normal': {
                    'color': 'red'
                }
            },
            'showSymbol': false
          },
          {
            'name': '磁盘写入速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.diskWriteBytes,
            'itemStyle': {
                'normal': {
                    'color': '#0000FF'
                }
            },
            'showSymbol': false
          }
        ]
      }
      this.disk = echarts.init(document.getElementById('J_disk'))
      this.disk.clear()
      this.disk.setOption(option, true)
      window.addEventListener('resize', () => {
        this.disk.resize()
      })
    },
    initNetworkCard () { // 初始化网卡数据
      let option = {
        'title': {
          'text': '网卡一速率(Bps)'
        },
        'tooltip': {
          'trigger': 'axis',
          'formatter':function (params) {
            return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + '网卡入方向流量速率：' + params[0].data + '</br>'  + '网卡出方向流量速率：' + params[1].data
          }
        },
        // 'legend': {
        //   'data': [ '磁盘使用量' ]
        // },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'show': false,
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
          'axisLabel': {
            'interval': 4,
            'show': true
          }
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '磁盘读取速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.netIncomingBytes,
            'itemStyle': {
                'normal': {
                    'color': 'red'
                }
            },
            'showSymbol': false
          },
          {
            'name': '磁盘写入速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.netOutgoingBytes,
            'itemStyle': {
                'normal': {
                    'color': '#0000FF'
                }
            },
            'showSymbol': false
          }
        ]
      }
      this.networkCard = echarts.init(document.getElementById('J_network_Card'))
      this.networkCard.clear()
      this.networkCard.setOption(option, true)
      window.addEventListener('resize', () => {
        this.networkCard.resize()
      })
    },
    initCardTwo () { // 初始化网卡数据
      let option = {
        'title': {
          'text': '网卡二速率(Bps)'
        },
        'tooltip': {
          'trigger': 'axis',
          'formatter':function (params) {
            return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + '网卡入方向流量速率：' + params[0].data + '</br>'  + '网卡出方向流量速率：' + params[1].data
          }
        },
        // 'legend': {
        //   'data': [ '磁盘使用量' ]
        // },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'show': false,
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
          'axisLabel': {
            'interval': 4,
            'show': true
          }
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '磁盘读取速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.netOtherIncomingBytes,
            'itemStyle': {
                'normal': {
                    'color': 'red'
                }
            },
            'showSymbol': false
          },
          {
            'name': '磁盘写入速率',
            'type': 'line',
            // 'stack': '占用率',
            'data': this.netOtherOutgoingBytes,
            'itemStyle': {
                'normal': {
                    'color': '#0000FF'
                }
            },
            'showSymbol': false
          }
        ]
      }
      this.CardTwo = echarts.init(document.getElementById('J_Card_Two'))
      this.CardTwo.clear()
      this.CardTwo.setOption(option, true)
      window.addEventListener('resize', () => {
        this.CardTwo.resize()
      })
    },
      initCardThree () { // 初始化网卡数据
          let option = {
              'title': {
                  'text': '网卡三速率(Bps)'
              },
              'tooltip': {
                  'trigger': 'axis',
                  'formatter':function (params) {
                      return '时间：' + params[0].dataIndex + '分钟' + '<br/>' + '网卡入方向流量速率：' + params[0].data + '</br>'  + '网卡出方向流量速率：' + params[1].data
                  }
              },
              // 'legend': {
              //   'data': [ '磁盘使用量' ]
              // },
              'grid': {
                  'left': '3%',
                  'right': '4%',
                  'bottom': '3%',
                  'containLabel': true
              },
              'toolbox': {
                  'show': false,
                  'feature': {
                      'saveAsImage': { }
                  }
              },
              'xAxis': {
                  'type': 'category',
                  'boundaryGap': false,
                  'data': ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19' ,'20', '21','22','23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'],
                  'axisLabel': {
                      'interval': 4,
                      'show': true
                  }
              },
              'yAxis': {
                  'type': 'value'
              },
              'series': [
                  {
                      'name': '磁盘读取速率',
                      'type': 'line',
                      // 'stack': '占用率',
                      'data': this.netIncomingBytes3,
                      'itemStyle': {
                          'normal': {
                              'color': 'red'
                          }
                      },
                      'showSymbol': false
                  },
                  {
                      'name': '磁盘写入速率',
                      'type': 'line',
                      // 'stack': '占用率',
                      'data': this.netOutgoingBytes3,
                      'itemStyle': {
                          'normal': {
                              'color': '#0000FF'
                          }
                      },
                      'showSymbol': false
                  }
              ]
          }
          this.CardThree = echarts.init(document.getElementById('J_Card_Three'))
          this.CardThree.clear()
          this.CardThree.setOption(option, true)
          window.addEventListener('resize', () => {
              this.CardThree.resize()
          })
      }
  }
}
</script>

<style>

</style>

